/* eslint-disable max-len */

import { Container, Wrapper } from '@/shared/ui';
import { Footer } from '@/widgets/Footer';
import { Header } from '@/widgets/Header';
import { References } from '@/widgets/References';
import Image from 'next/image';

import cs from './AboutFeed.module.scss';
import { references } from './config';
import { sections } from './config/sections';
import FullWidthBannerMobile from './images/fullwidth-banner-mobile.svg';
import FullWidthBanner from './images/fullwidth-banner.svg';
import { Description, Floater, NavigationCard, ScrollTop } from './ui';

export const AboutFeed = () => (
  <>
    <Header />
    <Wrapper>
      <Container>
        <Description />
      </Container>
    </Wrapper>
    <div className={cs.banner_fullwidth_desktop}>
      <Image alt="banner desktop" fill src={FullWidthBanner} />
    </div>
    <div className={cs.banner_fullwidth_mobile}>
      <Image alt="banner mobile" fill src={FullWidthBannerMobile} />
    </div>

    <Wrapper>
      <Container>
        <div className={cs.page}>
          <Floater>
            <NavigationCard sections={sections} />
          </Floater>
          <div className={cs.gap64}>
            {sections.map(({ id, body }) => (
              <div className={cs.gap48} key={id}>
                {body}
              </div>
            ))}
            <References className={cs.references} sources={references} />
          </div>
        </div>
      </Container>
    </Wrapper>
    <ScrollTop />

    <Footer />
  </>
);
